<template>
  <div class="gender-trend-container">
    <div class="chart-header">
      <h3 class="chart-title">患者性别趋势</h3>
      <div class="date-range">{{ dateRange }}</div>
    </div>
    
    <div class="filter-buttons">
      <div class="filter-label">指标筛选</div>
      <el-button 
        :type="activeFilter === 0 ? 'primary' : ''"
        :class="{ 'active': activeFilter === 0 }"
        @click="changeFilter(0)"
        class="filter-btn"
      >
        患者数量
      </el-button>
      <el-button 
        :type="activeFilter === 1 ? 'primary' : ''"
        :class="{ 'active': activeFilter === 1 }"
        @click="changeFilter(1)"
        class="filter-btn"
      >
        患者占比
      </el-button>
    </div>
    
    <div class="chart-content">
      <div ref="chartContainer" class="chart-container"></div>
      <div class="chart-legend">
        <div class="legend-item" v-for="item in legendData" :key="item.name">
          <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
          <span class="legend-text">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'GenderTrend',
  data() {
    return {
      activeFilter: 0, // 0: 患者数量, 1: 患者占比
      dateRange: '2025/07/30 - 2025/08/12',
      chart: null,
      legendData: [
        { name: '男', color: '#52c41a' },
        { name: '女', color: '#1890ff' },
        { name: '未知', color: '#ff4d4f' }
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer)
      this.updateChart()
      
      // 响应式处理
      window.addEventListener('resize', this.handleResize)
    },
    
    updateChart() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周三 2025/07/30', '周五 2025/08/01', '周日 2025/08/03', '周二 2025/08/05', '周四 2025/08/07', '周六 2025/08/09', '周一 2025/08/11'],
          axisLine: {
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666666',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 1000,
          interval: 200,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666666',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '男',
            type: 'line',
            data: [520, 580, 620, 650, 680, 720, 750],
            smooth: true,
           // symbol: 'none',
            lineStyle: {
              color: '#52c41a',
              width: 3
            },
            itemStyle: {
              color: '#52c41a'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(82, 196, 26, 0.3)'
                }, {
                  offset: 1, color: 'rgba(82, 196, 26, 0.05)'
                }]
              }
            }
          },
          {
            name: '女',
            type: 'line',
            data: [680, 720, 750, 780, 800, 820, 850],
            smooth: true,
        //    symbol: 'none',
            lineStyle: {
              color: '#1890ff',
              width: 3
            },
            itemStyle: {
              color: '#1890ff'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(24, 144, 255, 0.3)'
                }, {
                  offset: 1, color: 'rgba(24, 144, 255, 0.05)'
                }]
              }
            }
          },
          {
            name: '未知',
            type: 'line',
            data: [35, 38, 42, 40, 45, 48, 50],
            smooth: true,
       //     symbol: 'none',
            lineStyle: {
              color: '#ff4d4f',
              width: 2
            },
            itemStyle: {
              color: '#ff4d4f'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(255, 77, 79, 0.3)'
                }, {
                  offset: 1, color: 'rgba(255, 77, 79, 0.05)'
                }]
              }
            }
          }
        ]
      }
      
      this.chart.setOption(option)
    },
    
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    
    changeFilter(index) {
      this.activeFilter = index
      // 根据选择的指标更新图表数据
      this.updateChart()
    }
  }
}
</script>

<style lang="scss" scoped>
.gender-trend-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.date-range {
  font-size: 14px;
  color: #666666;
}

.filter-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.filter-label {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.filter-btn {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background: #ffffff;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
  
  &.active,
  &.el-button--primary {
    background-color: #409eff;
    border-color: #409eff;
    color: #ffffff;
  }
}

.chart-content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 100px);
}

.chart-container {
  flex: 1;
  min-height: 300px;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.legend-text {
  font-size: 14px;
  color: #333333;
}

// 响应式设计
@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .filter-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .chart-legend {
    flex-wrap: wrap;
    gap: 12px;
  }
}
</style>
